<template>
    <div class="ClosingAccouuntApplyFor topStyley">
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>公共服务类-->销户申请</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <!-- <div class="tab-header">
                    <div class="headerTitles text_center">销户申请</div>
                </div>-->
                <div>
                    <el-form ref="formData" :model="formData" :rules="rules" label-width="150px">
                        <el-row>
                            <el-col :span="4">
                                <el-form-item label="账户类别:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.accttype"
                                        placeholder="请选择账户类别"
                                        clearable
                                        @change="changeCardList"
                                    >
                                        <el-option
                                            v-for="item in AccountionTYPE_INFO"
                                            :label="item.label"
                                            :value="item.code"
                                            :key="item.label"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <el-form-item label="卡号:" class="text_fl">
                                    <el-select
                                        v-model="searchForm.cardno"
                                        placeholder="请选择卡号"
                                        clearable
                                    >
                                        <el-option
                                            v-for="item in cardList"
                                            :label="item.CARDNBR"
                                            :value="item.CARDNBR"
                                            :key="item.CARDNBR"
                                        ></el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                            <el-col :span="4">
                                <div class="text_center width30">
                                    <el-form-item label="账户类别:" class="text_fl">
                                        <span class="el-form-item-span">{{isCATEGORY}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="4">
                                <div class="text_center width30">
                                    <el-form-item label="卡号:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CARDNO}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="8">
                                <div class="text_center">
                                    <el-button type="primary" size="small" @click="pageJump">销户申请初审</el-button>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                    <el-dialog
                        v-drag
                        title="销户申请"
                        :visible.sync="centerDialogVisible"
                        width="500px"
                        :append-to-body="true"
                        top="30vh"
                        :close-on-click-modal="false"
                        center
                    >
                        <p>
                            卡号：
                            <span>{{this.formData.CARDNO}}</span>
                        </p>
                        <p>
                            卡产品：
                            <span>{{this.PRODUCT_value}}</span>
                        </p>
                        <p class="text_center padding_top15">
                            <span style="color:#3
                            a8ee6; ">您确认要销户吗？</span>
                        </p>
                        <span slot="footer" class="dialog-footer">
                            <el-button
                                size="small"
                                icon="el-icon-circle-close"
                                @click="centerDialogVisible = false"
                            >取 消</el-button>
                            <el-button
                                type="primary"
                                size="small"
                                @click="submitForm"
                                icon="el-icon-circle-check"
                            >确定</el-button>
                        </span>
                    </el-dialog>
                </div>

                <!-- 页面组件 -->
                <div v-if="true">
                    <ClosingAccountFirstInstance></ClosingAccountFirstInstance>
                </div>
                <div v-if="true">
                    <ClosingAccountSubmit></ClosingAccountSubmit>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import moment from 'moment';
import ClosingAccountFirstInstance from './ClosingAccountFirstInstance';
import ClosingAccountSubmit from './ClosingAccountSubmit';
import {
    trimString, closePage, getDictMappingValue, itoStr, updateDeal3004, updateDeal3601,
} from '@/utils/Common';
import { isEmptyObject } from '@/utils/Object';

export default {
    name: 'ClosingAccouuntApplyFor',
    data() {
        return {
            formData: {
                CATEGORY: '', // 账户类别
                CARDNO: '', // 卡号
                IDTYPE: '', // //证件种类
                CUSTID: '', // 证件号码
                AUTOFLAG: '0', // 溢缴款自动结清申请
                CLSFLAG: '1', // 销户标志
                BANKFLAG: '0', // 销户自动结清转账行标志
            },
            rules: {
                BEGDATE: [{ required: true, message: '请选择菜单类型' }],
            },
            // defaultParams: this.$store.getters.defaultParams || '', // 更新报文
            ClosingAccouuntApplyForInfo: {}, // 销卡成功返回回来的数据
            isCATEGORY: '',
            centerDialogVisible: false,
            PRODUCT_value: '',
            productId: '',
            searchForm: { // 账户类型、卡号双选字段
                accttype: '',
                cardno: '',
            },
            cardList: [], //卡列表
        };
    },
    computed: mapState({
        defaultParams: state => state.common.defaultParams, // 接口默认参数
        cardInfo_3004: state => state.common.cardInfo_3004,
        cardAccountInfo_3001: state => state.common.cardAccountInfo_3001, // 卡账户信息
        cardList_3601: state => state.common.cardList_3601,
        defaultpinFlag: state => state.common.pinFlag,
        AccountionTYPE_INFO: state => state.common.AccountionTYPE_INFO, //账户类别列表
    }),

    filters: {
        isCancltm: (value) => {
            let s = '';
            if (value && trimString(`${value}`) != '') {
                const t = value.toString();
                s = `${t.substr(0, 2)}:${t.substr(2, 2)}:${t.substr(4, 2)}`;
            }
            return `${moment().format('YYYY-MM-DD')}  ${s}`;
        },
    },
    components: {
        ClosingAccountFirstInstance,
        ClosingAccountSubmit,
    },
    mounted() {
        this.formData.CATEGORY = this.cardInfo_3004.CATEGORY;
        this.formData.CARDNO = this.cardInfo_3004.CARDNO;
        this.formData.IDTYPE = this.cardInfo_3004.KEYTYPE;
        this.formData.CUSTID = this.cardInfo_3004.CUSTID;
        this.getDictValue();
        // 初始化双选下拉

        this.searchForm.accttype = this.cardInfo_3004.CATEGORY + '';
        this.changeCardList(this.cardInfo_3004.CATEGORY + '');
    },
    methods: {
        // 账户类型 字典取值
        async getDictValue() {
            this.isCATEGORY = await getDictMappingValue('CATE', this.formData.CATEGORY, this);
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
        },

        //
        handelSure() {
            this.centerDialogVisible = true;
        },
        // 4011信用卡销户 销卡交易
        submitForm() {
            const defaultParam = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParam.body.appHead.tranCode = '4011';// 修改交易号
            defaultParam.body.appBody = {
                PINFLAG: this.defaultpinFlag,
                PIN: '',
                CARDNBR: this.formData.CARDNO,
                IDTYPE: this.formData.IDTYPE,// 证件种类
                CUSTID: this.formData.CUSTID,// 证件号码，
                CLSFLAG: this.formData.CLSFLAG,// //销户标志
                AUTOFLAG: this.formData.AUTOFLAG, // //溢缴款自动结清申请
                CLSFLAG: this.formData.CLSFLAG, // 销户标志
                BANKFLAG: this.formData.BANKFLAG, // 销户自动结清转账行标志
            };
            this.$post.common.transPort(defaultParam).then((res) => {
                console.log(res);
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '4011信用卡销户');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        this.ClosingAccouuntApplyForInfo = cardlossofs.body.appBody;
                        // this.isShowSuccess=true;
                        updateDeal3004(this.cardInfo_3004.CARDNO, this);
                        updateDeal3601(this.cardInfo_3004.CARDNO, this.cardInfo_3004.KEYTYPE, this.cardInfo_3004.CUSTID, this);
                        const successMessage = `姓名:${(`${this.ClosingAccouuntApplyForInfo.NAME}`).trim()} 卡号：${this.ClosingAccouuntApplyForInfo.CARDNBR} 销卡成功！`;
                        const ts = `${cardlossofs.sysHead.busiName}提示`;
                        this.$alert(successMessage, ts, {
                            customClass: 'success', type: 'success',
                            callback: (action) => {
                                this.handleClose();
                            },
                        });
                    } else {
                        const ErrorMessage = `错误码：${cardlossofs.sysHead.rspCd} ` + `错误信息：${cardlossofs.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, cardlossofs.sysHead.busiName, '提示', {
                            customClass: 'error', type: 'error',
                        });
                    }
                    this.centerDialogVisible = false;
                }
            });
        },
        // 关闭页面
        handleClose() {
            closePage(this.$route, this, 1);
        },
        // 跳转到销户申请初审页面
        pageJump() {
            this.$router.push({
                path: '/operationDeals/ClosingAccountFirstInstance',
            });
        },

        // 账号选择变更事件
        changeCardList(val) {
            console.log("============当前账户类型：" + val);
            console.log("============this.cardList_3601：", this.cardList_3601);
            console.log("============this.cardInfo_3004：", this.cardInfo_3004);
            let hasDefault = false; //是否包含默认卡
            this.cardList = [];
            this.cardList_3601.forEach((item) => {
                if (item.CATEGORY + '' === val) {
                    this.cardList.push(item);
                    if (item.CARDNBR === this.cardInfo_3004.CARDNO) {
                        hasDefault = true;
                    }
                }
            });
            console.log("============hasDefault：" + hasDefault);
            console.log("============this.cardList：", this.cardList);

            //包含默认卡，卡号显示默认卡，不包含，显示cardList里第一张卡号
            if (hasDefault) {
                this.searchForm.cardno = this.cardInfo_3004.CARDNO;
            } else {
                this.searchForm.cardno = this.cardList[0].CARDNBR;
            }
        },

    },
};
</script>

<style lang='scss' >
.ClosingAccouuntApplyFor {
    /* .el-form-item-span {
        background-color: #f5f7fa;
        border-color: #e4e7ed;
        color: #606266;
        cursor: not-allowed;
        width: 250px;
        min-width: 200px;
        height: 35px;
        line-height: 35px;
        display: inline-block;
        background-image: none;
        border-radius: 4px;
        border: 1px solid #dcdfe6;
        box-sizing: border-box;
        padding: 0 15px;
    } */
    .el-card__header {
        padding: 8px !important;
    }

    .el-card.is-always-shadow {
        -webkit-box-shadow: none;
        box-shadow: none;
    }
    .el-card {
        border: none;
    }
}
</style>
